<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="true" :visible.sync="dialog" :title="'用户问卷详情'" class="detail-content" top="10vh" width="1200px">
    <el-row align="center">
      <el-col :span="6" class="p-10"><span class="fz-bold">用户：</span><span class="">{{ data.userName }}</span></el-col>
      <el-col :span="6" class="p-10"><span class="fz-bold">联系电话：</span><span class="">{{ data.phone }}</span></el-col>
      <el-col :span="12" class="p-10"><span class="fz-bold">住址：</span><span class="">{{ data.addr }}</span></el-col>
      <el-col :span="24" class="p-10"><span class="fz-bold">用户建议：</span><span class="">{{ data.suggest }}</span></el-col>
    </el-row>
    <el-table ref="dataTable" :data="data.questionList" size="small" stripe style="width: 100%;">
      <el-table-column prop width="50" align="center" label="序号">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="题目内容" align="left" min-width="280"/>
      <el-table-column prop="type" label="题目类型" align="center" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.type==='score'">评分题</span>
          <span v-if="scope.row.type==='radio'">选择题</span>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="用户答案" align="center" min-width="100"/>
    </el-table>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button size="mini" type="primary" icon="el-icon-download" @click.stop="exportTable">导出明细</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { parseTime } from '@/utils/index'
import { exportItem } from '@/api/backApi'
import imgItem from '@/components/ImgView/ImgItem'

export default {
  name: 'Content',
  components: { imgItem },
  props: {
    sup_this: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      data: { orderMenuList: [] },
      dialog: false
    }
  },
  methods: {
    parseTime,
    exportTable() {
      exportItem({
        questionTplId: this.data.questionTplId,
        version: this.data.questionList[0].version
      }).then((res) => {
        const link = document.createElement('a')
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)

        link.download = '明细.xlsx' // 下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    }
  }
}
</script>
